<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="personalBody">
      <el-container style="margin-top: 40px" class="layout-container-demo">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-scrollbar>
            <el-menu :default-active="activeIndex" @select="handleSelect">
              <el-menu-item index="1">我的主页</el-menu-item>
              <el-menu-item index="2">我的喜欢</el-menu-item>
              <el-menu-item index="5">我的资料</el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <!--我的主页-->
          <!--==============================================我的主页模块start============================================-->
          <div v-if="nowIndex === '1'">
            <el-drawer
              :title="drawerTitle"
              :visible.sync="drawerVisible"
              :size="'25%'"
              direction="rtl">
              <div style="padding: 20px;display: inline-block">
                <div style="display: inline-block;margin-left: 10px;margin-top: 5px" v-for="(item,index) in drawerUserList" :key="index">
                  <el-link :underline="false" @click="toUserDetail(item.id)">
                    <el-card shadow="hover" style="border-radius: 15px;width: 100px;height: 120px;text-align: center" >
                      <el-image :src="item.headerImg" style="border-radius: 15px;width: 60px;height: 60px;margin-top: 20px"></el-image>
                      <div style="margin-top: 5px">{{item.username}}</div>
                    </el-card>
                  </el-link>
                </div>
                <div v-show="drawerUserList.length === 0" style="text-align: center;color: #969696">
                  <span>这里空空如也</span>
                </div>
              </div>
            </el-drawer>
            <!--主体-->
            <div class="box_1">
              <!--背景图片区域-->
              <div
                class="personalBackground"
                style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
                :style="{backgroundImage:'url('+userInfo.personalCenterImg+')'}">
              </div>
              <!--头像-->
              <div class="avatar">
                <el-image :src="userInfo.headerImg" style="width: 80px;height: 80px;border-radius: 40px"></el-image>
                <div>{{userInfo.username}}</div>
                <div style="display: inline-block;margin-top: 20px">
                  <div style="display: inline-block">
                    <a href="javascript:void(0)" class="a_remove_style" @click="openDrawer(1)">
                      {{followUserList.length}} 关注
                    </a>
                  </div>&nbsp;
                  <div style="display: inline-block">
                    <a href="javascript:void(0)" class="a_remove_style" @click="openDrawer(2)">
                      {{fanUserList.length}} 粉丝
                    </a>
                  </div>&nbsp;
                </div>
                <div style="font-size: 14px;font-weight: lighter;margin-top: 20px;color: white">
                  {{userInfo.personalSignature}}
                </div>
                <div style="margin-top: 20px">
                  <el-tag v-for="(item,index) in userInfo.musicHobby" :key="index" style="margin-left: 5px">{{item}}
                  </el-tag>
                </div>
              </div>
              <!-- 音乐评论-->
              <div class="commentBox">
                <h3 style="margin-left: 40px;padding-top: 10px">我的音乐评论</h3>
                <el-scrollbar style="margin-left: 40px;margin-right: 40px">
                  <div class="scrollbar-flex-content">
                    <div v-for="(item,index) in myMusicCommentList" :key="index" class="scrollbar-demo-item"
                         style="background-color: #eef1f6;display: inline-block;text-align: center;"
                         v-if="myMusicCommentList !== null">
                      <!--歌曲名-->
                      <el-link :underline="false" @click="toPlayMusicV2(item.hash,item.albumId)">
                        <el-card shadow="always"
                                 style="width: 250px;height: 60px;border-radius: 30px;text-align: left;margin-top: 20px">
                          <div style="display: inline-block">
                            <el-image
                              :src="item.commonMusicDTO.img"
                              style="width: 60px;height: 60px;border-radius: 30px">
                            </el-image>
                          </div>
                          <div style="display: inline-block;width: 180px;height: 60px;float: right;line-height: 60px;"
                               class="textDiv">
                            {{item.commonMusicDTO.audioName}}
                          </div>
                        </el-card>
                      </el-link>

                      <!--评论内容-->
                      <el-link :underline="false" @click="toPlayMusicComment(item.hash,item.albumId)">
                        <el-card shadow="always"
                                 style="width: 250px;height: 80px;margin-top: 20px;border-radius: 10px">
                          <div style="line-height: 80px;width: 250px" class="textDiv">
                            {{item.content}}
                          </div>
                        </el-card>
                      </el-link>

                    </div>
                    <div v-show="myMusicCommentList == ''" style="width: 100%">
                      <div style="text-align: center;color: #969696">
                        <span>你还没有评论音乐哦</span>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
              <!--动态-->
              <!--评论区-->
              <el-card class="commentInfo">
                <div slot="header">
                  <span style="font-size: 20px;font-weight: bold;">动态</span>
                </div>
                <!--动态主体-->
                <div style="margin-top: 20px" v-for="(item,index) in myIssueList" :key="index"
                     v-if="myIssueList !== null">
                  <!--头像-->
                  <div
                    style="display: inline-block;width: 40px;height: 40px;position: absolute;margin-top: 0">
                    <el-link :underline="false" @click="toUserDetail(item.userId)">
                      <el-image :src="item.userHeaderImg"
                                style="width: 40px;height: 40px;border-radius: 10px"></el-image>
                    </el-link>
                  </div>
                  <div style="display: inline-block;margin-left:50px;width: 650px;height: 20px;">
                    <!--用户名称和评论时间-->
                    <div style="height: 40px">
                      <div>{{item.userName}}</div>
                      <span style="font-size: 10px;color: #969696">{{item.createTime}}</span>
                      <el-popconfirm title="确定删除这条动态吗？" @confirm="deleteIssueComment(item)">
                        <template #reference>
                          <el-link icon="iconfont icon-shanchu" :underline="false" style="float: right" v-show="item.userId === userInfo.id"></el-link>
                        </template>
                      </el-popconfirm>
                    </div>
                    <!--评论内容-->
                    <div style="width: 650px;margin-top: 10px" v-html="item.content">

                    </div>
                    <div style="margin-top: 10px">
                      <el-link :underline="false" icon="iconfont icon-xin" v-if="item.isUserLike === 0"
                               @click="updateCommentStatus(item)">&nbsp;{{item.likeNum}}
                      </el-link>
                      <el-link :underline="false" icon="iconfont icon-xin2" v-else @click="updateCommentStatus(item)">
                        &nbsp;{{item.likeNum}}
                      </el-link>
                      <el-link :underline="false" icon="iconfont icon-xiaoxi" style="margin-left: 30px"
                               @click="showCommit(1,index)">&nbsp;
                      </el-link>
                    </div>
                    <!--评论控件-->
                    <div style="margin-top: 20px;width: 650px;margin-bottom: 10px"
                         :style="{'display':item.isShowComment}">
                      <el-input
                        v-model="item.inputText"
                        maxlength="150"
                        placeholder="请写下你精彩的评论吧"
                        show-word-limit
                        type="textarea"
                        style="width: 650px"
                      />
                      <div style="margin-top: 10px;text-align: right">
                        <el-button round size="mini" style="width: 80px" @click="removeComment(1,index)">取消</el-button>
                        <el-button type="primary" round size="mini" style="width: 80px"
                                   @click="commitCommentLevel1(item)">评论
                        </el-button>
                      </div>
                    </div>
                    <el-divider></el-divider>
                    <!--二级评论-->
                    <div style="display: inline-block;margin-top: 10px;" v-for="(item1,index1) in item.userCommentList"
                         :key="index1">
                      <div
                        style="width: 40px;height: 40px;display: inline-block;position: absolute;margin-top: 0">
                        <el-link :underline="false" @click="toUserDetail(item1.userId)">
                          <el-image :src="item1.userHeaderImg"
                                    style="width: 40px;height: 40px;border-radius: 10px"></el-image>
                        </el-link>
                      </div>
                      <!--用户名称和评论时间-->
                      <div style="height: 40px;margin-left: 50px;width: 600px">
                        <div>{{item1.userName}}</div>
                        <span style="font-size: 10px;color: #969696">{{item1.createTime}}</span>
                        <el-popconfirm title="确定删除这条评论吗？" @confirm="deleteIssueComment(item1)">
                          <template #reference>
                            <el-link icon="iconfont icon-shanchu" :underline="false" style="float: right" v-show="item1.userId === userInfo.id"></el-link>
                          </template>
                        </el-popconfirm>
                      </div>
                      <!--评论内容-->
                      <div style="width: 600px;margin-top: 20px">
                        <el-link :underline="false" @click="toUserDetail(item1.userId)">@{{item1.replyCommentUserName}}
                          &nbsp;
                        </el-link>
                        {{item1.content}}
                      </div>
                      <div style="margin-top: 10px">
                        <el-link :underline="false" icon="iconfont icon-xin" v-if="item1.isUserLike === 0"
                                 @click="updateCommentStatus(item1)">&nbsp;{{item1.likeNum}}
                        </el-link>
                        <el-link :underline="false" icon="iconfont icon-xin2" v-else
                                 @click="updateCommentStatus(item1)">
                          &nbsp;{{item1.likeNum}}
                        </el-link>
                        <el-link :underline="false" icon="iconfont icon-xiaoxi" style="margin-left: 30px"
                                 @click="showCommit(2,index,index1)">&nbsp;
                        </el-link>
                      </div>

                      <!--二级评论控件-->
                      <div style="margin-top: 20px;margin-bottom: 10px" :style="{'display':item1.isShowComment}">
                        <el-input
                          v-model="item1.inputText"
                          maxlength="150"
                          placeholder="请写下你精彩的评论吧"
                          show-word-limit
                          type="textarea"
                          style="width: 650px"
                        />
                        <div style="margin-top: 10px;text-align: right">
                          <el-button round size="mini" style="width: 80px;" @click="removeComment(2,index,index1)">取消
                          </el-button>
                          <el-button type="primary" round size="mini" style="width: 80px"
                                     @click="commitCommentLevel2(item, item1)">评论
                          </el-button>
                        </div>
                      </div>
                    </div>
                    <el-divider></el-divider>
                  </div>
                </div>
                <div v-show="myIssueList == ''" style="width: 100%">
                  <div style="text-align: center;color: #969696">
                    <span>有什么有趣的事想分享一下呢</span>
                  </div>
                </div>

              </el-card>
            </div>
            <!--发布动态-->
            <div class="add" title="发布动态">
              <el-link :underline="false" @click="openIssueDialog"><i class="el-icon-circle-plus"
                                                                      style="font-size: 50px"></i></el-link>
            </div>
            <!--发布动态-->
            <el-dialog :visible.sync="userIssueFormVisible" title="发表动态" width="50%" center
                       :close-on-click-modal="false">
              <div>
                <quill-editor ref="userIssueForm" v-model="issueContent" :options="editorOption"/>
              </div>
              <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="userIssueFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitUserIssue('userIssueForm')">发布</el-button>
                  </span>
              </template>
            </el-dialog>
          </div>
          <!--=============================================我的主页模块end===============================================-->
          <!--我的喜欢-->
          <!--=============================================我的喜欢模块start=============================================-->
          <div v-else-if="nowIndex === '2'">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" :stretch="true">
              <el-tab-pane label="音乐" name="music">
                <el-table :data="userLikeMusicList"
                          style="width: 100%"
                          v-loading="loading"
                          empty-text="你还未添加喜欢音乐，快起添加吧！"
                          element-loading-text="Loading..."
                          element-loading-svg-view-box="-10, -10, 50, 50">
                  <el-table-column prop="audioName" label="歌曲名" width="510"/>
                  <el-table-column prop="component" width="150">
                    <template slot-scope="scope">
                      <el-link :underline="false" v-show="true" @click="toPlayMusic(scope.$index)"><i
                        class="iconfont icon-bofangsanjiaoxing"></i>
                      </el-link>
                      &nbsp;
                      <el-link :underline="false" v-show="true"
                               @click="toPlayMusicComment(userLikeMusicList[scope.$index].hash,userLikeMusicList[scope.$index].albumId)">
                        <i class="iconfont icon-xiaoxi"></i></el-link>
                      &nbsp;
                      <el-link :underline="false" v-show="true" @click="likeMusic(scope.$index)">
                        <div v-if="userLikeMusicList[scope.$index].likeFlag === 1">
                          <i class="iconfont icon-xin2" style="color: red"></i>
                        </div>
                        <div v-else>
                          <i class="iconfont icon-xin"></i>
                        </div>
                      </el-link>
                      &nbsp;
                    </template>
                  </el-table-column>
                  <el-table-column prop="timeLength" label="时长"/>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="歌单" name="sheet">
                <!--歌单全部内容-->
                <div style="width: 100%;padding-bottom: 20px" v-for="(item,index) in userLikeSheetList" :key="index"
                     v-show="userLikeSheetList !== null">
                  <!--一行内容-->
                  <div>
                    <!--图片显示-->
                    <div style="display: inline-block;">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="item.imgUrl"
                        fit="fill"></el-image>
                    </div>
                    <!--信息显示区域-->
                    <div style="margin-left: 10px;display: inline-block;vertical-align: top;">
                      <div style="display: inline-block;float: left;width: 500px" :title="item.specialName"
                           v-text="item.specialName">1234356
                      </div>
                      <div :title="item.userName" style="width: 135px;
                line-height: 15px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;" v-text="'作者:'+item.userName"></div>
                      <div :title="item.intro" style="margin-top: 10px;
                  font-size: 10px;
                  color: #999999;
                  width: 650px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;" v-text="item.intro"></div>
                      <div style="margin-top: 20px">
                        <el-button type="primary" icon="iconfont icon-sousuo" size="mini"
                                   @click="toMusicSheetDetail(item)">&nbsp查看歌单
                        </el-button>
                        <el-button type="primary" size="mini" v-if="item.likeFlag === 0"
                                   @click="likeSheet(index,item.specialId)">
                          <i class="iconfont icon-xin"></i>
                          &nbsp收藏歌单
                        </el-button>
                        <el-button type="primary" size="mini" v-else @click="likeSheet(index,item.specialId)">
                          <i class="iconfont icon-xin2" style="color: red"></i>
                          &nbsp收藏歌单
                        </el-button>
                      </div>
                    </div>
                    <el-divider border-style="margin:12px"></el-divider>
                  </div>
                </div>
                <div v-show="userLikeSheetList == ''" style="width: 100%">
                  <div style="text-align: center;color: #969696">
                    <span>这里是空的哟，快去添加歌单吧</span>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="歌手" name="singer">
                <!--歌手头像显示区域-->
                <!--每排8个，一页64个-->
                <el-row>
                  <el-col :span="3" v-for="(item,index) in userLikeSingerList" :key="index" style="padding-top: 20px"
                          v-show="userLikeSingerList !== null">
                    <el-card :body-style="{ padding: '0px' }" shadow="hover">
                      <el-link @click="toSingerDetail(item)" :underline="false">
                        <el-image
                          :src="item.imgUrl"
                          fit="fit"
                          placeholder
                        ></el-image>
                      </el-link>
                      <el-link :underline="false">
                        <div class="textDiv">
                          {{item.singerName}}
                        </div>
                      </el-link>
                      <el-link :underline="false" v-show="true" @click="likeSinger(item.singerId,index)">
                        <div v-if="item.likeFlag === 1">
                          <i class="iconfont icon-xin2" style="color: red"></i>
                        </div>
                        <div v-else>
                          <i class="iconfont icon-xin"></i>
                        </div>
                      </el-link>
                    </el-card>
                  </el-col>
                  <div v-show="userLikeSingerList == ''" style="width: 100%">
                    <div style="text-align: center;color: #969696">
                      <span>你喜欢什么样的歌手呢</span>
                    </div>
                  </div>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--============================================我的喜欢模块end================================================-->
          <!--我的资料-->
          <!--============================================我的资料模块start===============================================-->
          <div v-else-if="nowIndex === '5'">
            <div class="settingDiv">
              <!--头像-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="12">
                    <div style="line-height:40px;font-size: 20px">头像</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <el-image
                      :src="userInfo.headerImg" fit="cover"
                      style="width: 40px;height: 40px;border-radius: 20px"></el-image>
                    <el-link :underline="false"
                             @click="userInfoDialog(1)"
                             icon="el-icon-arrow-right"
                             style="font-size: 40px;margin-left:10px;vertical-align: bottom"></el-link>
                  </el-col>
                </el-row>
              </el-card>
              <!--昵称-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="12">
                    <div style="line-height:40px;font-size: 20px">昵称</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <em style="color: #777777;font-size: 20px;line-height:40px;">{{userInfo.username}}</em>
                    <el-link :underline="false"
                             @click="userInfoDialog(2)"
                             icon="el-icon-arrow-right"
                             style="font-size: 40px;margin-left:10px;vertical-align: bottom"></el-link>
                  </el-col>
                </el-row>
              </el-card>
              <!--性别-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="12">
                    <div style="line-height:40px;font-size: 20px">性别</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <em style="color: #777777;font-size: 20px;line-height:40px;" v-if="userInfo.sex === null">未填写</em>
                    <em style="color: #777777;font-size: 20px;line-height:40px;" v-else>{{userInfo.sex}}</em>
                    <el-link :underline="false"
                             @click="userInfoDialog(3)"
                             icon="el-icon-arrow-right"
                             style="font-size: 40px;margin-left:10px;vertical-align: bottom"></el-link>
                  </el-col>
                </el-row>
              </el-card>
              <!--生日-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="12">
                    <div style="line-height:40px;font-size: 20px">生日</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <em style="color: #777777;font-size: 20px;line-height:40px;"
                        v-if="userInfo.birthday === null">未填写</em>
                    <em style="color: #777777;font-size: 20px;line-height:40px;" v-else>{{userInfo.birthday}}</em>
                    <el-link :underline="false"
                             @click="userInfoDialog(4)"
                             icon="el-icon-arrow-right"
                             style="font-size: 40px;margin-left:10px;vertical-align: bottom"></el-link>
                  </el-col>
                </el-row>
              </el-card>
              <!--邮箱-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="12">
                    <div style="line-height:40px;font-size: 20px">邮箱</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <em style="color: #777777;font-size: 20px;line-height:40px;">{{userInfo.email}}</em>
                  </el-col>
                </el-row>
              </el-card>
            </div>
            <div class="settingDiv" style="margin-top: 20px">
              <!--个性签名-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="24">
                    <div style="line-height:40px;font-size: 20px">个性签名</div>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                  <el-col :span="12">
                    <div style="color: #777777;font-size: 16px;line-height: 40px"
                         v-if="userInfo.personalSignature === null || userInfo.personalSignature === ''">未填写
                    </div>
                    <div style="color: #777777;font-size: 16px;line-height: 40px" v-else>
                      {{userInfo.personalSignature}}
                    </div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <el-link :underline="false"
                             @click="userInfoDialog(5)"
                             icon="el-icon-arrow-right"
                             style="font-size: 40px;margin-left:10px;vertical-align: bottom"></el-link>
                  </el-col>
                </el-row>
              </el-card>
            </div>
            <div class="settingDiv" style="margin-top: 20px">
              <!--兴趣-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="6">
                    <div style="line-height:40px;font-size: 20px">兴趣</div>
                  </el-col>
                  <el-col :span="18" style="text-align: right">
                    <el-tag effect="plain" v-for="(item,index) in userInfo.musicHobby" :key="index">{{item}}</el-tag>
                    <el-link :underline="false"
                             @click="userInfoDialog(6)"
                             icon="el-icon-arrow-right"
                             style="font-size: 40px;margin-left:10px;vertical-align: bottom"></el-link>
                  </el-col>
                </el-row>
              </el-card>
              <!--背景图片-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="12">
                    <div style="line-height:40px;font-size: 20px">背景图片</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <el-image
                      :src="userInfo.personalCenterImg" fit="cover"
                      style="width: 40px;height: 40px;border-radius: 5px"></el-image>
                    <el-link :underline="false"
                             @click="userInfoDialog(7)"
                             icon="el-icon-arrow-right"
                             style="font-size: 40px;margin-left:10px;vertical-align: bottom"></el-link>
                  </el-col>
                </el-row>
              </el-card>
              <!--ID-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="12">
                    <div style="line-height:40px;font-size: 20px">ID</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <em style="color: #777777;font-size: 20px;line-height:40px;">{{userInfo.id}}</em>
                  </el-col>
                </el-row>
              </el-card>
              <!--加入时间-->
              <el-card shadow="hover" class="settingCard">
                <el-row>
                  <el-col :span="12">
                    <div style="line-height:40px;font-size: 20px">加入时间</div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    <em style="color: #777777;font-size: 20px;line-height:40px;">{{userInfo.createTime}}</em>
                  </el-col>
                </el-row>
              </el-card>
            </div>
            <!--我的资料中的表单弹窗-->
            <el-dialog :visible.sync="userInfoFormVisible" :title="userInfoTitle">
              <el-form :model="userInfoForm" :rules="userInfoRules" ref="userInfoForm">
                <el-form-item label="头像" prop="headerImgFile" v-if="userInfoTitleIndex === 1">
                  <el-upload
                    drag
                    action=""
                    :limit="1"
                    accept="image/jpeg,image/gif,image/png"
                    :file-list="userFileList"
                    :auto-upload="false"
                    list-type="picture"
                    :http-request="uploadUserHeaderImg"
                    :on-change="userHeaderHandleChange"
                    :on-progress="userHeaderHandleProgress"
                    :on-exceed="userHeaderHandleExceed"
                    :on-remove="userHeaderHandleRemove"
                    :before-upload="beforeUploadSheetImg">
                    <el-icon class="el-icon-upload"></el-icon>
                    <div class="el-upload__text">
                      拖拽文件到此或 <em>点击上传</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip">
                        可上传jpg/png/bmp/jpeg/gif格式文件
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
                <el-form-item label="昵称"
                              :label-width="formLabelWidth"
                              prop="username"
                              v-else-if="userInfoTitleIndex === 2">
                  <el-input v-model="userInfoForm.username" :placeholder="userInfo.username" clearable minlength="2"
                            maxlength="16"/>
                </el-form-item>
                <el-form-item label="性别"
                              :label-width="formLabelWidth"
                              prop="sex"
                              v-else-if="userInfoTitleIndex === 3">
                  <el-select v-model="userInfoForm.sex" :placeholder="userInfo.sex">
                    <el-option value="男"></el-option>
                    <el-option value="女"></el-option>
                    <el-option value="保密"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="生日"
                              :label-width="formLabelWidth"
                              prop="birthday"
                              v-else-if="userInfoTitleIndex === 4">
                  <el-date-picker v-model="userInfoForm.birthday"
                                  type="date"
                                  :disabled-date="disabledDate"
                                  value-format="yyyy-MM-dd"
                                  format="yyyy-MM-dd"
                                  :placeholder="userInfo.birthday">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="个性签名"
                              :label-width="formLabelWidth"
                              prop="personalSignature"
                              v-else-if="userInfoTitleIndex === 5">
                  <el-input
                    v-model="userInfoForm.personalSignature"
                    type="textarea"
                    :placeholder="userInfo.personalSignature"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="兴趣标签"
                              :label-width="formLabelWidth"
                              prop="musicHobby"
                              v-else-if="userInfoTitleIndex === 6">
                  <div style="display: inline-block">
                    <el-tag v-for="(item,index) in userInfoForm.musicHobby"
                            :key="index"
                            :closable="true"
                            :disable-transitions="true"
                            @close="deleteTab(index)">
                      {{ item }}
                    </el-tag>
                    <el-input
                      v-if="inputVisible"
                      ref="InputRef"
                      v-model="myTab"
                      size="small"
                      style="width: 100px"
                      @blur="handleAddTab"
                    >
                    </el-input>
                    <el-button v-else size="small" @click="addMyTab">
                      + 自定义标签
                    </el-button>
                  </div>
                  <el-divider></el-divider>
                  <span>可选标签</span><br>
                  <el-link :underline="false" :key="index" @click="addTab(index)" v-for="(item,index) in tabs">
                    <el-tag>
                      {{ item }}
                    </el-tag>
                  </el-link>
                </el-form-item>
                <el-form-item label="背景图片" prop="personalCenterImgFile" v-else-if="userInfoTitleIndex === 7">
                  <el-upload
                    drag
                    action=""
                    :limit="1"
                    accept="image/jpeg,image/gif,image/png"
                    :file-list="userCenterImgList"
                    :auto-upload="false"
                    list-type="picture"
                    :http-request="uploadUserCenterImg"
                    :on-change="userCenterImgHandleChange"
                    :on-progress="userCenterImgHandleProgress"
                    :on-exceed="userCenterImgHandleExceed"
                    :on-remove="userCenterImgHandleRemove"
                    :before-upload="beforeUploadSheetImg">
                    <el-icon class="el-icon-upload"></el-icon>
                    <div class="el-upload__text">
                      拖拽文件到此或 <em>点击上传</em>
                    </div>
                    <template #tip>
                      <div class="el-upload__tip">
                        可上传jpg/png/bmp/jpeg/gif格式文件
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-form>
              <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="userInfoFormVisible = false">取消</el-button>
                    <el-button type="primary"
                               @click="submitUserInfoForm('userInfoForm',userInfoTitleIndex)">提交</el-button>
                  </span>
              </template>
            </el-dialog>
          </div>
          <!--============================================我的资料模块end=================================================-->
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
  import header from '../layout/Header.vue'
  import footer from '../layout/Footer.vue'
  import menu from '../layout/Menu.vue'

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: "PersonalCenter",
    data () {
      const checkUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'))
        } else {
          if (value.length < 2 || value.length > 16) {
            callback(new Error('用户名长度在2到16位'))
          }
          callback()
        }
      };
      return {
        userInfo: {
          userId: 0,
          id: 0,
          musicHobby: []
        },
        activeIndex: '1',
        nowIndex: '1',
        token: '',
        activeName: 'music',
        userLikeMusicList: [],
        userLikeSheetList: [],
        userLikeSingerList: [],
        //我的资料中的弹窗，做一体化
        userInfoFormVisible: false,
        userInfoTitle: '',
        userInfoTitleIndex: 0,
        userInfoForm: {
          username: '',
          sex: '',
          musicHobby: [],
          birthday: '',
          personalSignature: '',
          headerImg: '',
          headerImgFile: null,
          personalCenterImg: '',
          personalCenterImgFile: null,
          uploadElement: null
        },
        //用户头像上传文件List
        userFileList: [],
        //用户背景图片上传文件List
        userCenterImgList: [],
        userInfoRules: {
          username: [
            {
              required: true,
              message: '昵称不能为空',
              trigger: 'blur'
            },
            {
              validator: checkUserName,
              trigger: 'blur'
            }
          ],
          headerImgFile: [
            {
              required: true,
              message: '头像不能为空',
              trigger: 'blur'
            }
          ],
          personalCenterImgFile: [
            {
              required: true,
              message: '背景图片不能为空',
              trigger: 'blur'
            }
          ],
          sex: [
            {
              required: true,
              message: '性别不能为空',
              trigger: 'blur'
            }
          ],
          birthday: [
            {
              required: true,
              message: '生日不能为空',
              trigger: 'blur'
            }
          ],

        },
        //增加歌单表单
        dialogFormVisible: false,
        sheetForm: {
          sheetName: '',
          sheetInfo: '',
          sheetImg: null,
        },
        uploadUrl: this.$global.uploadUrl,
        formLabelWidth: '80px',
        //歌单上传文件List
        fileList: [],
        sheetRules: {
          sheetName: [
            {
              required: true,
              message: '歌单名不能为空',
              trigger: 'blur'
            },
          ],
          sheetInfo: [
            {
              required: true,
              message: '歌单简介不能为空',
              trigger: 'blur'
            },
          ],
          sheetImg: [
            {
              required: true,
              message: '歌单图片不能为空',
              trigger: 'blur'
            },
          ]
        },
        //全部标签信息
        tabs: [],
        inputVisible: false,
        myTab: '',
        infoType: {
          1: "headerImg",
          2: "userName",
          3: "sex",
          4: "birthday",
          5: "personalSignature",
          6: "musicHobby",
          7: "personalCenterImg"
        },
        //我的评论信息
        myMusicCommentList: [],
        myIssueList: [],
        userId: 0,
        userIssueFormVisible: false,
        //富文本编辑器模块配置参数
        editorOption: {
          placeholder: "今天有什么能让你开心的事呢？",
          modules: {
            toolbar: {
              container: ['bold', { 'size': ['small', false, 'large', 'huge'] }, 'italic', { 'color': [] }, { 'background': [] }, 'image'],
            },

          }
        },
        //富文本内容
        issueContent: '',
        //富文本图片list
        userIssueImgFileList: [],
        followUserList: [],
        fanUserList: [],
        drawerTitle: '',
        drawerVisible: false,
        drawerUserList: [],

      }
    },
    created () {
      document.title = '个人中心';
      this.token = sessionStorage.getItem("token");
      this.userId = this.$route.query.userId;
      this.verifyUserLogin(this.token);
      this.getUserInfo();
      this.findMyMusicComment();
      this.findMyIssue();
    },
    mounted () {
      this.findUserLikeMusic();

    },
    methods: {
      //打开关注/粉丝用户列表
      openDrawer (type) {
        if (type === 1) {
          this.drawerTitle = '关注用户列表';
          this.drawerUserList = this.followUserList;
        } else {
          this.drawerTitle = '粉丝用户列表';
          this.drawerUserList = this.fanUserList;
        }
        this.drawerVisible = true;
      },
      //获取用户关系
      getUserRelation (userId) {
        this.$axios({
          method: 'post',
          url: '/user/getUserRelationshipById/' + userId,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.followUserList = res.data.data.followUser;
          this.fanUserList = res.data.data.fanUser;
        })
      },
      //跳转用户细节
      toUserDetail (userId) {
        let routeUrl = this.$router.resolve({
          path: '/userDetail',
          query: {
            userId: userId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //点赞评论
      updateCommentStatus (item) {
        this.$axios({
          method: 'post',
          url: '/user/commentLikes/' + item.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.findMyIssue()
          }
        })
      },
      //删除动态和评论
      deleteIssueComment (item) {
        this.$axios({
          method: 'post',
          url: '/user/deleteComment/' + item.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          },
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.$message.success(`删除成功`);
            this.findMyIssue();
          } else {
            this.$message.error(`删除失败`)
          }
        })
      },
      //评论一级评论
      commitCommentLevel1 (item) {
        if (this.userInfo.id !== 0) {
          if (item.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/commentUserIssueLevel1',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: item.inputText,
                articleId: item.articleId,
                parentId: item.id,
                parentUserId: item.userId,
                parentUserName: item.userName,
                replyCommentId: item.id,
                replyCommentUserId: item.userId,
                replyCommentUserName: item.userName
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(res.data.msg);
                item.inputText = '';
                this.findMyIssue();
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //评论二级评论
      commitCommentLevel2 (item, item2) {
        if (this.userInfo.id !== 0) {
          if (item2.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/commentUserIssueLevel1',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: item2.inputText,
                articleId: item.articleId,
                parentId: item.id,
                parentUserId: item.userId,
                parentUserName: item.userName,
                replyCommentId: item2.id,
                replyCommentUserId: item2.userId,
                replyCommentUserName: item2.userName
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(res.data.msg);
                item2.inputText = '';
                this.findMyIssue();
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //发布动态，文本和图片
      submitUserIssue () {
        console.log(this.issueContent);
        if (this.issueContent.split(" ").join("").length === 0) {
          this.$message.info(`不能发表空白动态哦`)
        } else {
          this.$axios({
            method: 'post',
            url: '/user/releaseIssue',
            headers: {
              authentication: sessionStorage.getItem("token")
            },
            data: {
              content: this.issueContent
            }
          }).then(res => {
            if (res.data.msgCode === '200') {
              this.$message.success(`发布成功`);
              this.userIssueFormVisible = false;
              this.issueContent = '';
              this.findMyIssue(this.userId);
            }else {
              this.$message.error(res.data.msg);
            }
          })
        }
      },
      openIssueDialog () {
        this.userIssueFormVisible = true;
      },
      //展示评论
      showCommit (level, index, index2) {
        if (level === 1) {
          this.myIssueList[index].isShowComment = 'block'
        } else {
          this.myIssueList[index].userCommentList[index2].isShowComment = 'block'
        }

      },
      //关闭评论
      removeComment (level, index, index2) {
        if (level === 1) {
          this.myIssueList[index].isShowComment = 'none'
        } else {
          this.myIssueList[index].userCommentList[index2].isShowComment = 'none'
        }
      },
      //获取动态
      findMyIssue () {
        this.$axios({
          method: 'post',
          url: '/user/userIssue',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.myIssueList = res.data.data.info;
        })
      },
      //我的音乐评论
      findMyMusicComment () {
        this.$axios({
          method: 'post',
          url: '/user/myMusicComment',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.myMusicCommentList = res.data.data.info;
          }
        })
      },
      //提交用户表单
      submitUserInfoForm (formName, type) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (type === 1) {
              if (this.beforeUploadSheetImg(this.userInfoForm.headerImgFile)) {
                //进行上传
                this.$message.success(`成功`);
                this.uploadUserHeaderImg();
                //保存头像路径
              }
            } else if (type === 2) {
              this.userInfoForm.uploadElement = this.userInfoForm.username;
              this.submitUserInfoByType(type)
            } else if (type === 3) {
              this.userInfoForm.uploadElement = this.userInfoForm.sex;
              this.submitUserInfoByType(type)
            } else if (type === 4) {
              this.userInfoForm.uploadElement = this.userInfoForm.birthday;
              this.submitUserInfoByType(type)
            } else if (type === 5) {
              this.userInfoForm.uploadElement = this.userInfoForm.personalSignature;
              this.submitUserInfoByType(type)
            } else if (type === 6) {
              this.userInfoForm.uploadElement = this.userInfoForm.musicHobby;
              this.submitUserInfoByType(type)
            } else if (type === 7) {
              if (this.beforeUploadSheetImg(this.userInfoForm.personalCenterImgFile)) {
                //进行上传
                this.$message.success(`成功`);
                this.uploadUserCenterImg();
                //保存头像路径
              }
            }
          }
        })
      },
      submitUserInfoByType (type) {
        let info = this.infoType[type];
        this.$axios({
          method: 'post',
          url: '/user/updateUserInfo/' + info,
          headers: {
            authentication: sessionStorage.getItem("token")
          },
          data: {
            param: this.userInfoForm.uploadElement
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.$message.success(`修改成功`);
            this.userInfoFormVisible = false;
            this.getUserInfo()
          }
        })
      },
      userInfoDialog (item) {
        if (item === 1) {
          this.userInfoTitle = "修改头像";
          this.userInfoFormVisible = true;
          this.userInfoTitleIndex = item;
        } else if (item === 2) {
          this.userInfoTitle = "修改昵称";
          this.userInfoFormVisible = true;
          this.userInfoTitleIndex = item;
        } else if (item === 3) {
          this.userInfoTitle = "修改性别";
          this.userInfoFormVisible = true;
          this.userInfoTitleIndex = item;
        } else if (item === 4) {
          this.userInfoTitle = "修改生日";
          this.userInfoFormVisible = true;
          this.userInfoTitleIndex = item;
        } else if (item === 5) {
          this.userInfoTitle = "修改个性签名";
          this.userInfoFormVisible = true;
          this.userInfoTitleIndex = item;
        } else if (item === 6) {
          this.userInfoTitle = "修改兴趣";
          this.userInfoFormVisible = true;
          this.userInfoTitleIndex = item;
          this.getAllTabs();
        } else if (item === 7) {
          this.userInfoTitle = "修改背景图片";
          this.userInfoFormVisible = true;
          this.userInfoTitleIndex = item;
        }
        this.$nextTick(() => {
          this.$refs['userInfoForm'].clearValidate();
        })
      },
      //选择标签
      addTab (index) {
        if (this.userInfoForm.musicHobby.length >= 4) {
          this.$message.info(`只能添加四个标签`)
        } else {
          this.userInfoForm.musicHobby.push(this.tabs[index]);
          this.tabs.splice(index, 1);
        }
      },
      //删除标签
      deleteTab (index) {
        this.tabs.push(this.userInfoForm.musicHobby[index]);
        this.userInfoForm.musicHobby.splice(index, 1);
      },
      //自定义标签
      addMyTab () {
        this.inputVisible = true;
      },
      handleAddTab () {
        if (this.myTab === '') {
          this.inputVisible = false;
        } else {
          if (this.userInfoForm.musicHobby.length >= 4) {
            this.$message.info(`只能添加四个标签`)
          } else {
            this.userInfoForm.musicHobby.push(this.myTab);
            this.inputVisible = false;
          }
        }

      },
      //获取兴趣全部标签
      getAllTabs () {
        this.$axios({
          method: 'get',
          url: '/user/before/getAllTabs'
        }).then(res => {
          //解除双向数据绑定
          let userInfoTab = [...this.userInfo.musicHobby];
          this.tabs = res.data.data.info;
          this.userInfoForm.musicHobby = userInfoTab;
          const userTab = this.userInfoForm.musicHobby;
          let allTab = this.tabs;
          for (let i = 0; i < userTab.length; i++) {
            for (let j = 0; j < allTab.length; j++) {
              if (userTab[i] === allTab[j]) {
                allTab.splice(j, 1);
                break;
              }
            }
          }
        })
      },
      //上传图片之前校验格式
      beforeUploadSheetImg (file) {
        let FileExt = file.name.replace(/.+\./, "");
        if (['jpg', 'png', 'bmp', 'jpeg', 'gif'].indexOf(FileExt.toLowerCase()) === -1) {
          this.$message({
            type: 'warning',
            message: '请上传后缀名为jpg/png/bmp/jpeg/gif格式文件！'
          });
          return false;
        } else {
          return true;
        }
      },
      /*
      =======================用户头像==============================
       */
      //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      userHeaderHandleChange (file, fileList) {
        if (fileList.length >= 2) {
          return;
        } else {
          this.userInfoForm.headerImgFile = file;
        }
      },
      //文件上传时调用
      userHeaderHandleProgress (file) {
        this.userInfoForm.headerImgFile = file;
      },
      //超过上传限制
      userHeaderHandleExceed (file, fileList) {
        this.$message.info(`您已上传一张图片，如需修改请点击下方删除`)
      },
      //移除
      userHeaderHandleRemove (file, fileList) {
        this.userInfoForm.headerImgFile = null
      },
      //自定义上传头像
      uploadUserHeaderImg () {
        if (this.userInfoForm.headerImgFile == null) {
          this.$message.warning(`请上传头像图片`);
        } else {
          let formData = new FormData();
          formData.append('file', this.userInfoForm.headerImgFile.raw);
          this.$axios({
            method: 'post',
            url: '/upload/uploadUserHeaderImg',
            headers: {
              'Content-Type': 'multipart/form-data',
              authentication: sessionStorage.getItem("token")
            },
            data: formData
          }).then(res => {
            this.userInfoForm.headerImg = res.data.data.fileName;
            this.userInfoForm.uploadElement = res.data.data.fileName;
            this.submitUserInfoByType(1)
          })
        }
      },
      /*
      ==============================================================
       */
      /*
      =======================用户背景================================
       */
      userCenterImgHandleChange (file, fileList) {
        if (fileList.length >= 2) {
          return;
        } else {
          this.userInfoForm.personalCenterImgFile = file;
        }
      },
      userCenterImgHandleProgress (file) {
        this.userInfoForm.personalCenterImgFile = file;
      },
      userCenterImgHandleExceed (file, fileList) {
        this.$message.info(`您已上传一张图片，如需修改请点击下方删除`)
      },
      userCenterImgHandleRemove (file, fileList) {
        this.userInfoForm.personalCenterImgFile = null
      },
      uploadUserCenterImg () {
        if (this.userInfoForm.personalCenterImgFile == null) {
          this.$message.warning(`请上传头像图片`);
        } else {
          let formData = new FormData();
          formData.append('file', this.userInfoForm.personalCenterImgFile.raw);
          this.$axios({
            method: 'post',
            url: '/upload/uploadUserCenterImg',
            headers: {
              'Content-Type': 'multipart/form-data',
              authentication: sessionStorage.getItem("token")
            },
            data: formData
          }).then(res => {
            this.userInfoForm.personalCenterImg = res.data.data.fileName;
            this.userInfoForm.uploadElement = res.data.data.fileName;
            this.submitUserInfoByType(7)
          })
        }
      },

      /*
      ==============================================================
       */
      //喜欢歌手
      likeSinger (item, index) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeSinger',
            data: {
              singerId: item
            },
            headers: {
              authentication: sessionStorage.getItem("token")
            }
          }).then(res => {
            if (res.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            } else {
              if (this.userLikeSingerList[index].likeFlag === 1) {
                this.userLikeSingerList[index].likeFlag = 0;
              } else {
                this.userLikeSingerList[index].likeFlag = 1;
              }
            }
          })
        } else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          })
        }
      },
      //跳转到歌手细节
      toSingerDetail (item) {
        console.log(item);
        this.$router.push({
          path: '/singerDetail',
          query: {
            id: item.id
          }
        })
      },
      //喜欢歌单
      likeSheet (index, specialId) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeSheet',
            data: {
              specialId: specialId
            },
            headers: {
              authentication: sessionStorage.getItem("token")
            }
          }).then(res => {
            if (res.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            } else {
              if (this.userLikeSheetList[index].likeFlag === 1) {
                this.userLikeSheetList[index].likeFlag = 0;
              } else {
                this.userLikeSheetList[index].likeFlag = 1;
              }
            }
          })
        } else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          })
        }
      },
      toMusicSheetDetail (item) {
        console.log(item);
        this.$router.push({
          path: '/musicSheetDetail',
          query: {
            id: item.id
          }
        })
      },
      //添加喜欢歌曲
      likeMusic (res) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeMusic',
            dataType: 'json',
            crossDomain: true,
            headers: {
              Authentication: sessionStorage.getItem("token")
            },
            data: {
              hash: this.userLikeMusicList[res].hash,
              albumId: this.userLikeMusicList[res].albumId
            }
          }).then(res1 => {
            if (res1.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            } else {
              if (this.userLikeMusicList[res].likeFlag === 1) {
                this.userLikeMusicList[res].likeFlag = 0;
              } else {
                this.userLikeMusicList[res].likeFlag = 1;
              }
            }
          })
        } else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          }).catch(() => {
            this.$router.push('/login')
          })
        }
      },
      //tab页跳转，歌曲、专辑、歌手
      handleClick (tab, event) {
        if (tab.name === 'music') {
          this.findUserLikeMusic()
        }
        if (tab.name === 'sheet') {
          this.findUserLikeSheet()
        }
        if (tab.name === 'singer') {
          this.findUserLikeSinger()
        }
      },
      //获取用户喜欢歌手
      findUserLikeSinger () {
        this.$axios({
          method: 'post',
          url: '/user/userLikeSingerList',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.userLikeSingerList = res.data.data.info;
        })
      },
      //获取用户喜欢歌单
      findUserLikeSheet () {
        this.$axios({
          method: 'post',
          url: '/user/userLikeSheetList',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.userLikeSheetList = res.data.data.info;
        })
      },
      //获取用户喜欢歌曲
      findUserLikeMusic () {
        this.$axios({
          method: 'post',
          url: '/user/userLikeMusicList',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.userLikeMusicList = res.data.data.info;
        })
      },
      //播放音乐
      toPlayMusic (res) {
        let routeUrl = this.$router.resolve({
          path: '/playMusic',
          query: {
            hash: this.userLikeMusicList[res].hash,
            albumId: this.userLikeMusicList[res].albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.userLikeMusicList
          }
        }).then(res => {
          console.log(res.data);
          window.open(routeUrl.href, '_blank');
        });
      },
      //播放音乐v2
      toPlayMusicV2 (hash, albumId) {
        let routeUrl = this.$router.resolve({
          path: '/playMusic',
          query: {
            hash: hash,
            albumId: albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      toPlayMusicComment (hash, albumId) {
        let routeUrl = this.$router.resolve({
          path: '/playMusicComment',
          query: {
            hash: hash,
            albumId: albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      handleSelect (item) {
        this.nowIndex = item;
      },
      verifyUserLogin (token) {
        if (token === '') {
          this.$message({
            message: '您还未登录，请先的登录',
            type: 'error'
          });
          this.$router.push('/login');
        }
      },
      //获取用户信息
      getUserInfo () {
        let token = sessionStorage.getItem("token");
        if (token == null) {
          token = localStorage.getItem("token");
        }
        this.$axios({
          method: 'post',
          url: '/user/getUserInfo',
          headers: {
            authentication: token
          }
        }).then(res => {
          this.userInfo = res.data.data.info;
          this.getUserRelation(this.userInfo.id);
        })
      }
    }
  }
</script>

<style scoped>

  .textDiv {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70px;
  }

  .replyBody:hover {
    background-color: rgba(68, 222, 255, 0.11);

  }

  .replyBodyText {
    display: none;
  }

  .replyBody:hover .replyBodyText {
    display: block;
  }

  /deep/ .el-divider--horizontal {
    margin: 0;
  }

  .add {
    position: fixed;
    right: 35px;
    bottom: 30px;
    z-index: 999;
    overflow: hidden;

  }

  .personalBody {
    width: 1000px;
    margin: 0 auto;
  }

  .box_1 {
    width: 760px;
    position: relative;
  }

  .personalBackground {
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 15px;
    filter: brightness(70%);
    background-position: center;
    text-align: center;
    position: relative;
    z-index: 10;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .avatar {
    height: 0;
    width: 100%;
    text-align: center;
    position: relative;
    color: #c9c5c5;
    font-size: 20px;
    font-weight: bold;
    font-family: "微软雅黑 Light";
    z-index: 20;
    margin-top: -300px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .a_remove_style {
    text-decoration: none;
    color: #c9c5c5;
  }

  .commentBox {
    background-color: #ffffff;
    width: 100%;
    height: 320px;
    position: relative;
    z-index: 2;
    border-radius: 15px;
    margin-top: 320px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

  }

  .homeBox {
    background-color: #ffffff;
    width: 100%;
    position: relative;
    z-index: 2;
    border-radius: 15px;
    padding-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .scrollbar-flex-content {
    display: flex;
  }

  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 200px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    color: var(--el-color-danger);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  /deep/ .el-card {
    background-color: transparent;
  }

  /deep/ .el-descriptions__body {
    background-color: transparent;
  }

  .settingDiv {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .settingCard {
    border-radius: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
  }

  /deep/ .el-card__body {
    padding: 0;
  }

  .commentInfo {
    margin-top: 20px;
    height: 100%;
    border-radius: 15px;
    padding: 20px 20px 40px 20px;
    background-color: white;
  }

</style>
